<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>OAL</title>
    <link rel="stylesheet" href="../../common/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../common/css/bootstrap-switch.css" >
    <link rel="stylesheet" href="../../common/css/bootstrap-spinner.min.css" >
    <link rel="stylesheet" href="../../common/css/standard.css">

</head>

<body>
    <div class="oal-page oal-page-home">
        <!--Content -->
        <div class="oal-page-content-section">
            <!-- Header -->
            <div class="oal-page-header-fixed">
                <div class="oal-page-header row">
                    <div class="oal-page-header-logo-section">
                        <div class="oal-page-header-logo"></div>
                    </div>
                    <div class="oal-page-header-actions text-right">
                        <div class="oal-page-header-menu-list">
                            <div class="oal-page-header-menu-item oal-page-header-menu-promotion">
                                <span>Seabird Promotion</span>
                            </div>
                            <div class="oal-page-header-menu-item oal-page-header-menu-myRate">
                                <span>My Rates</span>
                            </div>
                            <div class="oal-page-header-menu-item oal-page-header-menu-myShipment ">
                                <div>My Shipments<span class="badge">New</span></div>
                            </div>
                            <div class="oal-page-header-menu-item oal-page-header-menu-notification ">
                                <span>Notification</span>
                                <a  id="notificationPopover" data-container="body"
                                      data-placement="bottom" data-html="true"
                                      data-content="<div><ul class='popover-list'>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      </ul>
                                      <div class='popover-list-more'><a href='#'>More &gt;&gt;</a></div>
                                      </div>">
                                <span class="badge">
                                    New
                                </span></a>
                            </div>

                            <div class="oal-page-header-menu-item oal-page-header-userProfile isActive">
                                <div aria-expanded="true" aria-haspopup="true" data-toggle="dropdown" class="btn-userProfile">
                                    <span class="btn-userProfile-image"><img width="22px" src="../../common/images/default.png"></span>
                                    <span class="action">Jason</span>
                                    <span class="caret"></span>
                                </div>
                                <ul class="dropdown-menu oal-page-header-menu-dropdown">
                                    <li><a href="homepage_setting.html"><span class= "pull-left oal-page-menu-icon-setting"></span>&nbsp;&nbsp;Setting</a></li>
                                    <li><a href="#"><span class="pull-left oal-page-menu-icon-logOut"></span>&nbsp;&nbsp;Logout</a></li>
                                </ul>
                            </div>
                            <div class="oal-page-header-menu-item oal-page-header-menu-setting">
                                <span>Setting</span>
                            </div>
                            <div class="oal-page-header-menu-item oal-page-header-menu-logout">
                                <span>Logout</span>
                            </div>
                        </div>

                        <div class="oal-page-header-chat-miniScreen">
                            <a class="hamburger menu" href="javascript:void(0)" data-tiggle="click" data-toggle="tooltip" data-placement="bottom" title="Menu">
                                <div></div>
                                <div></div>
                                <div></div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- Content -->
            <div class="oal-page-content">
                <div class="oal-page-content-item">
                        <div class="oal-page-content-rate-section">
                            <div class="oal-page-content-center-section">
                            <div class="oal-page-content-setting-title">
                                Notification Setting
                            </div>
                            <div class="oal-page-content-setting-section">

                                <div class="form-group">
                                    <label class="control-label">Shipment Event</label>
                                    <div class="oal-page-form-content container-fluid">
                                            <div class="oal-page-content-setting-item row">
                                                <span class="col-lg-8 col-sm-8 col-md-8">Onboard at POL</span>
                                                <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                            </div>
                                     
                                            <div class="oal-page-content-setting-item row">
                                                <span class="col-lg-8 col-sm-8 col-md-8">ATD at POL</span>
                                                <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                            </div>
                                            <div class="oal-page-content-setting-item row">
                                                <span class="col-lg-8 col-sm-8 col-md-8"> ATD at T/S port</span>
                                                <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                            </div>
                                            <div class="oal-page-content-setting-item row">
                                                <span class="col-lg-8 col-sm-8 col-md-8">ATA at POD</span>
                                                <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                            </div>

                                    </div>

                                </div>

                                <div class="form-group">
                                    <label class=" control-label">Detention at Origin</label>

                                    <div class="oal-page-form-content container-fluid">
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Detention free time will expire in
                                                <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                    <input type="text" class="form-control text-right" value="2" data-rule="quantity" data-min="1" data-max="30">
                                                      <span class="input-group-addon">
                                                        <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                        <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                      </span>
                                                </div>
                                                </div> days</span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                        <div class="oal-page-content-setting-item row">
                                                <span class="col-lg-8 col-sm-8 col-md-8">Detention free time has expired
                                                <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                    <input type="text" class="form-control text-right" value="0" data-rule="quantity" data-min="0" data-max="30">
                                                      <span class="input-group-addon">
                                                        <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                        <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                      </span>
                                                </div>
                                                </div> days

                                                </span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>


                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class=" control-label">Detention and Demurrage at Destination</label>

                                    <div class="oal-page-form-content container-fluid">
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Demurrage free time will expire in
                                                <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                    <input type="text" class="form-control text-right" value="2" data-rule="quantity" data-min="1" data-max="30">
                                                          <span class="input-group-addon">
                                                            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                          </span>
                                                </div>
                                                </div> days
                                            </span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Demurrage free time has expired <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                <input type="text" class="form-control text-right" value="0" data-rule="quantity" data-min="0" data-max="30">
                                                      <span class="input-group-addon">
                                                        <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                        <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                      </span>
                                            </div>
                                            </div> days
                                            </span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                        <div class="oal-page-content-setting-item row" >
                                            <span class="col-lg-8 col-sm-8 col-md-8">Detention free time will expire in <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                <input type="text" class="form-control text-right" value="2" data-rule="quantity" data-min="1" data-max="30">
                                                          <span class="input-group-addon">
                                                            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                          </span>
                                            </div>
                                            </div>  days</span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Detention free time has expired <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                <input type="text" class="form-control text-right" value="0" data-rule="quantity" data-min="0" data-max="30">
                                                      <span class="input-group-addon">
                                                        <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                        <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                      </span>
                                            </div>
                                            </div> days
                                            </span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>


                                    </div>

                                </div>
                                <div class="form-group">
                                    <label class="  control-label">Reminder</label>
                                    <div class="oal-page-form-content container-fluid">
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Empty container is available for pickup – <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                <input type="text" class="form-control text-right" value="14" data-rule="quantity" data-min="1" data-max="30">
                                                          <span class="input-group-addon">
                                                            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                          </span>
                                            </div>
                                            </div> days before CY cutoff</span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Empty container pickup reminder – <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                <input type="text" class="form-control text-right" value="3" data-rule="quantity" data-min="1" data-max="30">
                                                          <span class="input-group-addon">
                                                            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                          </span>
                                            </div>
                                            </div> days before CY cutoff</span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Laden container return reminder – <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                <input type="text" class="form-control text-right" value="2" data-rule="quantity" data-min="1" data-max="30">
                                                          <span class="input-group-addon">
                                                            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                          </span>
                                            </div>
                                            </div> days before CY cutoff</span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="  control-label">Schedule Change</label>
                                    <div class="oal-page-form-content container-fluid">
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Change of POD ETA – <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                <input type="text" class="form-control text-right" value="2" data-rule="quantity" data-min="1" data-max="30">
                                                          <span class="input-group-addon">
                                                            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                          </span>
                                            </div>
                                            </div>  days or above </span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Change of CY Cutoff – <div class="notification-spinner-wrap"><div class="input-group spinner" data-trigger="spinner">
                                                <input type="text" class="form-control text-right" value="2" data-rule="quantity" data-min="1" data-max="30">
                                                          <span class="input-group-addon">
                                                            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                          </span>
                                            </div>
                                            </div>  hours or above </span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                        <div class="oal-page-content-setting-item row">
                                            <span class="col-lg-8 col-sm-8 col-md-8">Transshipment Misconnection </span>
                                            <span class="col-lg-4 col-sm-4 col-md-4 text-right"><input type="checkbox" class="setting-checkbox" data-size="mini" checked></span>
                                        </div>
                                       
                                    </div>
                                </div>


                            </div>

                            <div class="text-center oal-page-content-setting-action-bar">
                                <a class="btn btn-default oal-page-content-button" href="homepage_setting.html"> Reset</a>

                                <button type="button" class="btn oal-page-highlight-btn">Save</button>

                            </div>
                            </div>

                        </div>
                    
                </div>


            </div>

            <!-- Footer -->

            <div class="oal-page-footer">
                <div class="oal-page-footer-detail row">

                    <div class="col-lg-6 col-md-6 col-sm-6 text-left">
                        <div class="oal-page-footer-section  ">

                            <div class="oal-page-footer-copyRight ">Copyright © 1998-2016. <br>Orient Overseas Container Line Limited. <br>All rights reserved.</div>
                        </div>

                    </div>
                    <div class="col-lg-6 col-md-6  col-sm-6">
                        <div class="oal-page-footer-section">
                            <div class="oal-page-footer-phone-images">
                                <img src="../../common/images/phone.png"/>
                            </div>
                            <div class="oal-page-footer-section-message text-left">
                                <div class="oal-page-footer-section-title">OOCL Seabird</div>
                                <p>Your shipment assistance who answer your shipment enquiry anytime anywhere</p>
                                <button class="btn btn-promo-action">Chat for App trial</button>
                            </div>
                            <div class="oal-page-footer-download-images">
                                <div class="oal-page-footer-download-google"></div>
                                <div class="oal-page-footer-download-app"></div>

                            </div>
                        </div>

                    </div>


                </div>
            </div>

        </div>

        <!-- Chat -->
        <div class="oal-page-chat-section">
            <div class="arrow"></div>

            <div class="oal-page-side-bar">
                <div class="oal-page-chat-active-icon"></div>
                <div class="oal-page-chat-active-item" id="btn_chat">
                    <div class="icon-text oal-page-chat-icon">Chat</div>
                    <span class="badge"> 3 </span>
                </div>
                <div class="oal-page-booking-item">
                    <div class="icon-text oal-page-booking-item-icon"><i class="fa fa-gavel" aria-hidden="true"></i><br>Book</div>
                </div>
                <div class="oal-page-side-top">
                    <span class="glyphicon glyphicon-arrow-up"></span>
                    <div>Top</div>
                </div>
            </div>

            <div class="oal-page-chat-layer">
                <iframe id="chatIframe" src="http://chenji5-3-w7:90/NJS_PRS_CUST/secured/chat?userId=poonhs"></iframe>

            </div>

        </div>
    </div>


    <!--include JS File -->
    <script src="../../common/js/jquery-1.12.4.js"></script>
    <script src="../../common/js/bootstrap.js"></script>

    <script src="../../common/js/bootstrap-switch.js"></script>
    <script src="../../common/js/jquery.spinner.min.js"></script>
    <script src="../controler/homepage.js"></script>
    <script src="../controler/notification-setting.js"></script>


</body>


</html>